<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>Document</title>
</head>

<body>
    <!-- <h1>这是一个h1标签</h1> -->
    <!-- 容器类 -->
    <div class="container">
        这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容
    </div>

    <div class="container-fluid">
        这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容
    </div>
    <!-- 按钮类 -->
    <input type="button" value="按钮" class="btn btn-primary">
    <a href="" class="btn btn-success btn-lg" style="font-size: 30px;">按钮</a>
    <button class="btn btn-danger btn-sm">按钮</button>
    <button class="btn btn-warring btn-xs">按钮</button>
    <button class="btn btn-info">按钮</button>

    <!-- 表格类 -->
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th>IP</th>
            <th>hostname</th>
            <th>type</th>
            <th>status</th>
        </tr>
        <tr>
            <td>192.168.19.100</td>
            <td>server01</td>
            <td>web</td>
            <td>online</td>
        </tr>
        <tr>h
            <td>192.168.19.101</td>
            <td>server02</td>
            <td>mysql</td>
            <td>online</td>
        </tr>
        <tr class="danger">
            <td>192.168.19.102</td>
            <td>server03</td>
            <td>web</td>
            <td>down</td>
        </tr>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 模态框结构 -->
    <div id="mymol" class="modal fade" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
                <div class="modal-content">
                      <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                     <div class="modal-body">
                    <!-- 此处是在模态框中显示的内容 -->
                    <!--         <p>One fine body…</p> -->
                    <img src="./img/bg.jpg" alt="" width="100%">
                </div>
                     <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="mybtn">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 触发按钮 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymol">
        Launch demo modal
    </button>
    <!-- bootstrapjs文件里有jquery语法 依赖jquery -->
    <!-- 先jquery -->
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script>
        $('#mybtn').click(function(){
            $('#mymol').modal('hide')
        })
    </script>
</body>

</html>